<template>
  <view>
    <cu-custom bgColor="bg-red">
      <block slot="left" class="text-white text-bold text-xl margin-left-lg">我的</block>
    </cu-custom>
    <!--    红色背景图-->
    <view class="bg-red" style="height:200rpx;border-radius:0 0 25rpx 25rpx"></view>
    <!--    会员-->
    <view class="bg-black flex justify-between margin-lr-xl padding-lr-sm padding-tb-sm"
          style="margin-top:-180rpx;border-radius:30rpx 30rpx 0 0">
      <view style="color:#E5B18C" class="">
        <text class="margin-right-xxs">VIP会员</text>
        |
        <text class="margin-left-xs text-sm">全场8.8折</text>
      </view>
      <view class="text-white text-sm padding-tb-xs round padding-left-sm padding-right-xs"
            style="background:-webkit-linear-gradient(left,#F9C399,#B1663E)">立即开通
        <text class="iconfont icon-rightArrow text-sm"></text>
      </view>
    </view>
    <!--    个人中心-->
    <view class="bg-white margin-lr-sm shadow padding-bottom-xl radius">
      <!-- 用户信息 start-->
      <view class="flex justify-between">
        <!--        头像，名称-->
        <view class="flex" @tap="login">
          <img :src="avatar" class="round cu-avatar xl solid margin-left margin-top"/>
          <view class=" margin-left  margin-top-xl">
            <view class="text-black text-bold text-xl">
              <text>{{ user ? user.nickname : '立即登录' }}</text>
            </view>
            <view style="width:100rpx;height:50rpx" class="relative text-white margin-top-sm">
              <view class="radius-xxxl text-xs padding-sm align-center flex justify-center position-absolute"
                    style="width:46rpx;height:46rpx;top:-6rpx;left:-6rpx;z-index:1;background-color:#F9C399">LV
              </view>
              <view class="padding-left-lg padding-tb-xxs text-xs radius"
                    style="background:-webkit-linear-gradient(left,#B1663E,#F9C399)">青铜
              </view>
            </view>
          </view>
        </view>
        <!--        积分-->
        <view class="flex align-center">
          <view class="bg-white flex justify-center align-center shadow padding-lr-sm padding-tb-xs"
                style="border-radius:31rpx 0 0 31rpx;">
            <view class="flex">
              <view class="bg-red round text-center" style="width:40rpx;height:40rpx;">
                <text class="iconfont icon-integral text-white"></text>
              </view>
              <text class="margin-left-xs">积分</text>
            </view>
            <view class="cuIcon-right margin-left-sm"></view>
          </view>
        </view>
      </view>
      <!--      用户信息 end-->

      <view class="flex justify-between margin-lr-xl">
        <view @tap="balance(item)">
          <view class="text-lg text-black text-bold margin-tb-sm">5,000.00</view>
          <view class="text-center">余额</view>
        </view>
        <view>
          <view class="text-lg text-black text-bold margin-tb-sm">12</view>
          <view class="text-center">红包</view>
        </view>
        <view>
          <view class="text-lg text-black text-bold margin-tb-sm text-center">52234</view>
          <view class="text-center">粉丝</view>
        </view>
        <view @tap="wallet(item)">
          <view>
            <img :src="$tools.j('order_icon_1@3x.png')" style="width:75rpx;height:70rpx">
          </view>
          <view class="text-center">钱包</view>
        </view>
      </view>
    </view>

    <!--      电影票栏-->
    <view class="bg-white padding-tb-lg padding-lr-lg margin-top margin-lr-sm flex justify-between radius">
      <navigator hover-class="none" :url="url(item)">
        <view>
          <view class="text-center">
            <img :src="$tools.j('ticket.png')" style="width:75rpx;height:72rpx">
          </view>
          <view>电影票</view>
        </view>
      </navigator>
      <view>
        <view>
          <img :src="$tools.j('ticket.png')" style="width:75rpx;height:72rpx">
        </view>
        <view>会员卡</view>
      </view>
      <view>
        <view>
          <img :src="$tools.j('ticket.png')" style="width:75rpx;height:72rpx">
        </view>
        <view>票友圈</view>
      </view>
      <view class="text-center">
        <view>
          <img :src="$tools.j('ticket.png')" style="width:75rpx;height:72rpx">
        </view>
        <view>榜上有名</view>
      </view>
    </view>
    <!-- 下面列表 -->
    <!--		<view class="cu-list menu margin-top-xs margin-bottom-xl text-gray padding-tb bg-white radius margin-lr-sm shadow">-->
    <!--			<view class="cu-item arrow" @tap="goTo('/pages/article/agreement',false)">-->
    <!--				<button class="cu-btn content">-->
    <!--					<text class="cuIcon-message text-gray" style="font-size:42rpx;"></text>-->
    <!--					<text class="text-black">用户协议</text>-->
    <!--				</button>-->
    <!--			</view>-->
    <!--			<view class="cu-item arrow">-->
    <!--				<button class="cu-btn content" open-type="feedback">-->
    <!--					<text class="cuIcon-write text-gray" style="font-size:42rpx;"></text>-->
    <!--					<text class="text-black">建议反馈</text>-->
    <!--				</button>-->
    <!--			</view>-->
    <!--			<view class="cu-item">-->
    <!--				<button class="cu-btn content" open-type="contact" bindcontact="handleContact">-->
    <!--					<text class="cuIcon-service text-gray" style="font-size:42rpx;"></text>-->
    <!--					<text class="text-black">联系客服</text>-->
    <!--				</button>-->
    <!--				<view>周一至周日 10:00-22:00</view>-->
    <!--			</view>-->
    <!--		</view>-->

    <view class="bg-white margin-top margin-lr-sm padding-tb-lg padding-lr-lg radius">
      <view class="text-black text-lg text-bold">我的工具</view>
      <view class="flex justify-between flex-wrap margin-top-lg">
        <view class="relative">
          <view class="iconfont icon-share text-lg text-center"></view>
          <view>分享中心</view>
          <view>
            <view class="bg-red text-white text-xs padding-lr-xs padding-tb-xxs position-absolute"
                  style="top:-20rpx;right:-24rpx;border-radius:30rpx 30rpx 30rpx 0">HOT
            </view>
          </view>
        </view>
        <view class="margin-lr-lg">
          <view class="iconfont icon-raiders text-lg text-center"></view>
          <view>新手攻略</view>
        </view>
        <view>
          <view class="iconfont icon-coop text-lg text-center"></view>
          <view>商务合作</view>
        </view>
        <view class="margin-lr-lg">
          <view class="iconfont icon-agreement text-lg text-center"></view>
          <view>服务协议</view>
        </view>
        <view class="margin-top-lg">
          <view class="iconfont icon-service text-lg text-center"></view>
          <view>在线客服</view>
        </view>
      </view>
    </view>
    <eqd-copy-right/>
    <authorize ref="authorize" @loginOk="loginOk"/>
  </view>
</template>
<script>

import authorize from '@/components/authorize/Authorize'

export default {
  data() {
    return {
      defaultAvatar: this.$tools.j('default-face.jpg')
    }
  },
  components: {
    authorize
  },
  computed: {
    avatar() {
      if (this.user) {
        return this.user.avatar
      }
      return this.defaultAvatar
    },
    user() {
      return this.$user.user();
    }
  },
  async created() {
    console.log('初始化用户登录所需sesssion_key')
    if (!this.user) {
      this.$user.wx_login_info()
    }

  },
  methods: {
    loginOk(data) {
      console.log('登录成功啦')
      console.log(data);
      this.goTo(data)
    },
    goTo(url, auth = true) {
      if (auth && !this.user) {
        this.$refs['authorize'].setRedirectUrl(url).show();
        return false;
      }
      this.$tools.goTo(url)
    },
    login() {
      if (!this.user) {
        this.$refs['authorize'].show();
        return false;
      }
    },
    balance(item) {
      this.$tools.goTo('/pages/user/balance')
    },
    wallet(item) {
      this.$tools.goTo('/pages/user/wallet')
    },
    url(item) {
      return `/pages/movie/ticket`
    }
  }
}
</script>
<style>
</style>